<template>
  <div class="admin-productlist-container">
    <el-main>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索栏 -->
      <div class="search-option">
        <el-input
          class="search-input"
          size="medium"
          placeholder="请输入商品名称"
          v-model="title"
        ></el-input>
        <el-button type="primary" @click="load()" size="small"
          >查询 <i class="el-icon-search"></i
        ></el-button>
        <el-button type="info" @click="reset" size="small">重置</el-button>
      </div>

      <!-- 商品表格 -->
      <el-table
        :data="productList"
        style="width: 100%"
        :height="600"
        border
        show-header
      >
        <el-table-column
          label="商品ID"
          prop="id"
          align="center"
          :width="100"
          sortable
        />
        <el-table-column
          label="商品名称"
          prop="goodsName"
          :width="120"
          sortable
        />
        <el-table-column
          label="商品图片"
          prop="mainImage"
          align="center"
          :width="100"
        >
          <template v-slot="{ row }">
            <el-image :src="row.mainImage"> </el-image>
          </template>
        </el-table-column>

        <el-table-column
          label="卖家ID"
          prop="userId"
          align="center"
          :width="90"
          sortable
        />
        <el-table-column label="卖家名" prop="userName" :width="100" sortable />

        <el-table-column
          label="审核状态"
          align="center"
          :width="120"
          :filters="statusFilters"
          :filter-method="filterStatus"
          filter-placement="bottom-end"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="statusTagType(row.auditStatus)"
              disable-transitions
              effect="plain"
            >
              {{ statusTextMap[row.auditStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="商品描述"
          prop="description"
          align="left"
          :width="150"
        />
        <el-table-column
          label="价格"
          prop="price"
          align="center"
          :width="80"
          sortable
        />

        <el-table-column
          label="库存"
          prop="stock"
          align="center"
          :width="80"
          sortable
        />

        <el-table-column
          label="点赞量"
          prop="likes"
          align="center"
          :width="100"
          sortable
        />
        <el-table-column
          label="收藏量"
          prop="favorites"
          align="center"
          :width="100"
          sortable
        />
        <el-table-column
          label="发布时间"
          prop="createTime"
          align="center"
          :width="150"
          sortable
        />
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
          :width="150"
          sortable
        />
        <el-table-column label="审核结果" align="center" :width="180">
          <template v-slot="{ row }">
            <span v-if="row.auditorId"
              >{{ row.auditorName }}：{{
                row.auditRemark
                  ? row.auditRemark
                  : row.rejectReason
                  ? row.rejectReason
                  : "暂无意见"
              }}
            </span>
            <span v-else>- -</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template v-slot="{ row }">
            <el-button
              v-if="row.auditStatus === 0"
              type="text"
              style="color: #00caa8"
              @click="openResetDialog(row)"
              size="mini"
              >审核</el-button
            >
            <el-button
              type="text"
              size="mini"
              style="color: #f56c6c"
              @click="openDeleteDialog(row)"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[5, 10, 20, 30]"
        layout="sizes,total, prev, pager, next"
        background
      />
    </el-main>
    <el-dialog
      :visible="dialogVisibleDelete"
      width="400px"
      @close="dialogVisibleDelete = false"
    >
      <template slot="title">
        <span> <i class="el-icon-warning-outline"></i>&nbsp;提示</span>
      </template>
      <span style="font-size: 14px">
        确定要下架商品
        <b>{{ currentGood && currentGood.goodsName }}</b>
        <span style="font-size: 14px">
          ({{ currentGood && currentGood.description }})
        </span>
        吗？
      </span>
      <template slot="footer">
        <el-button @click="dialogVisibleDelete = false" size="mini"
          >取消</el-button
        >
        <el-button type="primary" @click="confirmDelete" size="mini"
          >确定</el-button
        >
      </template>
    </el-dialog>
    <el-dialog
      title="审核商品"
      :visible.sync="dialogVisibleReset"
      class="address-dialog"
      width="500px"
      @close="dialogVisibleReset = false"
    >
      <el-input
        type="textarea"
        placeholder="请输入审核意见"
        v-model="remark"
        maxlength="30"
        resize="none"
        show-word-limit
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleReset = false" size="mini"
          >取消</el-button
        >
        <el-button type="danger" @click="auditReject" size="mini"
          >拒绝</el-button
        >
        <el-button type="primary" @click="auditApprove" size="mini"
          >通过</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisibleReset: false,
      dialogVisibleDelete: false,
      currentGood: null,
      productList: [],
      remark: "",
      statusTextMap: {
        0: "待审核",
        1: "审核通过",
        2: "审核拒绝",
      },
      statusFilters: [
        { text: "待审核", value: 0 },
        { text: "审核通过", value: 1 },
        { text: "审核拒绝", value: 2 },
      ],
    };
  },

  created() {
    this.load();
  },
  methods: {
    filterStatus(value, row) {
      return row.auditStatus === value;
    },
    load() {
      this.$axios
        .get("/goods/admin/search", {
          params: {
            current: this.page,
            size: this.pageSize,
            keyword: this.title,
          },
        })
        .then(
          (res) => {
            if (res && res.status === 200) {
              this.productList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.data);
            }
          },
          (err) => {
            this.$message.error(err || "获取商品信息失败");
          }
        );
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    reset() {
      this.page = 1;
      this.pageSize = 10;
      this.title = "";
      this.load();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.load();
    },
    statusTagType(status) {
      switch (status) {
        case 1:
          return "success";
        case 0:
          return "info";
        case 2:
          return "danger";
        default:
          return "";
      }
    },
    openDeleteDialog(good) {
      this.currentGood = good;
      this.dialogVisibleDelete = true;
    },
    confirmDelete() {
      this.handleDelete();
      this.dialogVisibleDelete = false;
    },
    handleDelete() {
      this.$axios.delete(`/goods/delete//${this.currentGood.id}`).then(
        (res) => {
          // console.log(res);
          this.$message.success("下架商品成功！");
          this.load();
        },
        (err) => {
          this.$message.error(err || "失败");
        }
      );
    },
    openResetDialog(good) {
      this.currentGood = good;
      this.dialogVisibleReset = true;
    },
    auditReject() {
      this.$axios
        .post(`/goods/audit/reject/${this.currentGood.id}`, null, {
          params: {
            auditorId: this.$store.state.user.userId,
            auditorName: this.$store.state.user.username,
            rejectReason: this.remark,
          },
        })
        .then(
          (res) => {
            console.log(res);
            this.$message.success("拒绝商品审核成功！");
            this.remark = "";
            this.dialogVisibleReset = false;
            this.load();
          },
          (err) => {
            this.$message.error(err || "失败");
          }
        );
    },
    auditApprove() {
      this.$axios
        .post(`/goods/audit/approve/${this.currentGood.id}`, null, {
          params: {
            auditorId: this.$store.state.user.userId,
            auditorName: this.$store.state.user.username,
            remark: this.remark,
          },
        })
        .then(
          (res) => {
            console.log(res);
            this.$message.success("通过商品审核成功！");
            this.remark = "";
            this.dialogVisibleReset = false;
            this.load();
          },
          (err) => {
            this.$message.error(err || "失败");
          }
        );
    },
  },
};
</script>

<style lang="scss">
.admin-productlist-container {
  min-height: 800px;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
}
</style>
